<!DOCTYPE html>
<html>
<head>
<title>Facebook Login Page</title>
<meta charset="UTF-8">
</head>
<script type="text/javascript" src="/static/jquery-1.7.2.min.js"></script>
<script>
//引入 facebook SDK
(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id))
        return;
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<body>
    <h1>Login Page</h1>
    <form action="${pageContext.request.contextPath }/login">
        username: <input type="text" name="username"><br /> <br />
        password: <input type="password" name="password"><br /> <br />
        <input type="submit" value="登录">
    </form><!-- 普通登录 -->
    <br />

    <fb:login-button scope="public_profile,email"
                     onlogin="checkLoginState();"
                     auto_logout_link="true"
                     size="large"
                     show_faces="true">
    </fb:login-button><!-- facebook 按钮 -->
    <div id="status"></div><!-- 登录状态显示 -->

<script>

    function statusChangeCallback(response) {
        //可用于后台验证，但是前台调用SDK则会自动验证
        var accessToken=response.authResponse.accessToken;
        console.log(response.authResponse.accessToken);
        if (response.status === 'connected') {//sdk会自动保留accessToken，并且验证该请求是否来自我的应用
            FB.api('/me?fields=name,first_name,last_name,email', function(response) {

                console.log(response);

                //将用户信息传回服务端
                window.location.href="http://demo.com:8100/facebook.html?userInfo="+JSON.stringify(response);
                /* $.ajax({
                        url:"http://gntina.iok.la/userInfo",
                        data:{
                            userInfo:JSON.stringify(response)
                        },
                        dataType:"json",
                        async:false,
                        success:function(data){
                            window.location.href="";
                        }
                    }); */
                document.getElementById('status').innerHTML =
                    'Thanks for logging in, ' + response.name + '!';
            });

        } else {
            document.getElementById('status').innerHTML = 'Please log '
                + 'into this app.';
        }
    }

    function checkLoginState() {
        FB.getLoginStatus(function(response) {
            statusChangeCallback(response);
        });
    }

    window.fbAsyncInit = function() {
        FB.init({
            appId : '111082206428505',
            cookie : true,
            xfbml : true,
            version : 'v2.8'
        });

        FB.getLoginStatus(function(response) {
            statusChangeCallback(response);
        });

    };

</script>
</body>
</html>